<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表格主体区域 -->

    <subject :lists = "list">
      <template #titleBlock>
        <h1 >多福多寿</h1>
      </template>
      <template v-slot:index = "scoped">
        <h3>{{scoped.indexs}}</h3>
      </template>
      <template v-slot:itNe = "scoped">
        <p class="pp">{{scoped.itemName}}</p>
      </template>
      <template v-slot:itpc = "scoped">
        <p >{{scoped.itemPrice}}</p>
      </template>
      <template v-slot:itTe = "scoped">
        <p >{{scoped.itemTime | FilterTime}}</p>
      </template>
      <template #del>
        <a href="#">删除</a>
      </template>
    </subject>
  </table>
</template>

<script>
import subject from './components/subject.vue'
import moment from 'moment'
export default {
  data: function () {
    return {
      list: [
        { id: 100, name: '外套', price: 199, time: new Date('2010-08-12') },
        { id: 101, name: '裤子', price: 34, time: new Date('2013-09-01') },
        { id: 102, name: '鞋', price: 25.4, time: new Date('2018-11-22') },
        { id: 103, name: '头发', price: 19900, time: new Date('2020-12-12') }
      ]
    }
  },
  components: {
    subject
  },
  filters: {
    FilterTime (val) {
      return moment(val).format('YYYY-MM-DD')
    }
  },
  methods: {

  }

}
</script>

<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
}
.pp {
  color: #f00;
}
</style>
